<html>
<head>
  <meta charset="UTF-8">
</head>
<title>
  点名了
</title>
<body>
<form>
  <div align="center">
    <br>
    <br>
    <input type="button" value="开始"  onclick="students()"  class="ks"/>
    <script>
      var i = 0;
      //t用来接收setTimeOut()的返回值
      var t;

     //"王琛舒"
      var st = [
        "郜志伟","李芸可","王楠楠","余遨","马英超","胡延啸","李卓毅"];
      var st2 = [
        "王献华","吴慧跃","韩政","裴天龙","毛利军","王琛舒","张总"];
      var u;
      var s;


      //点名函数
      function students()
      {

        //随机点名 产生0-数组长度之间的数作为数组下标
        var num = Math.floor(Math.random()*st.length);

        var num2 = Math.floor(Math.random()*st2.length);
        u = st[num];
        s = st[num2];


        //更改文本框显示的value值
        document.getElementById("div1").innerHTML = u ;
        document.getElementById("div2").innerHTML = s ;


        t = setTimeout("students()", 0.01);
      }
    </script>


    <input type="button" value="停止"  onclick="stop()" class="ks" id="nu"/>
    <script>
      //停止点名函数
      function stop()
      {
        clearTimeout(t);
      }
    </script>


    <hr color="blue">
    <br>
    <table border="1" cellpadding="0" cellspacing="0">
      <tr>
        <td>面试官</td>
        <td>求职者</td>
      </tr>
      <tr>
        <td>天下</td>
        <td>天啊</td>
      </tr>
    </table>
<!--    <div id="div1" align="center">hr</div>-->
<!--    <div id="div2" align="center">面试者</div>-->
  </div>
</form>
</body>
<head>
  <style type="text/css">
    body{
      background: #f5faff;
    }


    .ks{
      width: 160px;
      line-height: 60px;
      text-align: center;
      font-weight: bold;
      color: #fff;
      text-shadow:2px 2px 2px #333;
      border-radius: 50px;
      margin:0 20px 20px 0;
      position: relative;
      overflow: hidden;
      background-color: limegreen;
      border:1px solid #d2a000;
      box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
    }


    #nu{
      background-color: red;
    }


    #div1{
      font:100px '微软雅黑';
      text-align: center;
      background-color: gainsboro;
      width: 30%;
      height: 30%;
      margin-bottom:20px;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    #div2{
      font:100px '微软雅黑';
      text-align: center;
      background-color: gainsboro;
      width: 30%;
      height: 30%;
      margin-bottom:20px;
      display:flex;
      justify-content:center;
      align-items:center;
    }
  </style>
</head>
</html>